.my {
    .header {
        background: url(../../assets/images/190819_1j85g48lc84kk8deg00f66fk53dlc_750x229.png) 0 -.44rem no-repeat;
        background-size: 100%;
        overflow: hidden;
        margin-bottom: .18rem;
        height: 4.56rem;

        .header-box {
            margin: 1.2rem auto 0;
            height: 3.36rem;
            width: 9.36rem;
            border-radius: .12rem;
            background: #fff;
            position: relative;

            .link {
                .user-wrap {
                    position: absolute;
                    left: 50%;
                    top: -.66rem;
                    z-index: 98;
                    margin-left: -.66rem;
                    width: 1.733333rem;
                    height: 1.733333rem;
                    border: .06rem solid #fff;
                    border-radius: 100%;
                    overflow: hidden;

                    .user-img {
                        width: 100%;
                        border: none;
                        vertical-align: middle;
                    }
                }

                .user-info {
                    width: 9.36rem;
                    text-align: center;
                    padding-top: 1.28rem;

                    .user-name {
                        line-height: .42rem;
                        font-weight: 700;
                        font-size: .34rem;
                        display: flex;
                        -webkit-box-pack: center;
                        justify-content: center;
                        -webkit-box-align: center;
                        align-items: center;
                    }
                }

                .user-member {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 9.36rem;
                    height: 1.44rem;
                    background: url(https://s10.mogucdn.com/mlcdn/c45406/191010_2il1l3i91gkd5c461j93e5ehfcgi5_1404x216.png) no-repeat;
                    background-size: 100%;
                    border-bottom-left-radius: .12rem;
                    border-bottom-right-radius: .12rem;
                }
            }
        }


    }

    .banner {
        margin: 0 auto;
        width: 9.36rem;
        border-radius: .12rem;
        background: #fff;
        margin-bottom: .18rem;
        height: 1.866667rem;

        .banner-box {
            padding: .1rem;
            display: flex;
            -webkit-box-pack: start;
            justify-content: start;
            flex-wrap: wrap;

            .box {
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                flex-direction: column;
                -webkit-box-align: center;
                align-items: center;
                width: 1.333333rem;
                margin: 0.133333rem .18rem;

                .img-wrap {
                    position: relative;
                    width: 0.666667rem;
                    height: 0.666667rem;
                    margin: .06rem;

                    img {
                        width: 100%;
                    }
                }
            }
        }
    }

    .carts {
        margin: 0 auto;
        width: 9.36rem;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        margin-bottom: .18rem;

        .carts-box {
            width: 9.36rem;

            .box-left {
                background: url(https://s10.mogucdn.com/mlcdn/c45406/190815_3637hh8ac09e50j7f07i7eealck4i_513x360.png) 0px 0px / 170px no-repeat;
                width: 4.586667rem;
                height: 3.2rem;
                float: left;
                border-radius: .12rem;
                overflow: hidden;
                padding: .2rem .24rem;

                .left-text {
                    font-size: 0.32rem;
                    color: #333;
                }
            }

            .box-right {
                width: 4.56rem;
                height: 3.2rem;
                background: #fff;
                border-radius: .12rem;
                overflow: hidden;
                float: right;

                .right-item {
                    display: flex;
                    -webkit-box-pack: justify;
                    justify-content: space-between;
                    -webkit-box-align: center;
                    align-items: center;
                    width: 3.92rem;
                    height: 1.066667rem;
                    margin: 0 auto;
                    border-bottom: .01rem solid #efefef;

                    .item-left {
                        font-size: 0.373333rem;
                        color: #333;
                    }

                    .item-right {
                        font-size: .22rem;
                        color: #999;
                        -webkit-box-align: center;
                        align-items: center;
                        display: flex;
                        line-height: 1;

                        img {
                            height: 0.24rem;
                            width: 0.133333rem;
                            margin-left: .07rem;
                            border: none;
                            vertical-align: middle;
                        }
                    }
                }
            }
        }

    }

    .order {
        margin: 0 auto;
        width: 9.36rem;
        border-radius: .12rem;
        background: #fff;
        margin-bottom: .18rem;
        height: 2.906667rem;

        .order-box {
            .box-top {
                margin: 0 auto;
                width: 8.72rem;
                height: 1.066667rem;
                line-height: 1.066667rem;
                overflow: hidden;
                border-bottom: .01rem solid #efefef;

                .top-left {
                    float: left;
                    font-size: 0.373333rem;
                    color: #333;
                }

                .top-right {
                    float: right;
                    display: flex;
                    -webkit-box-align: center;
                    align-items: center;
                    color: #999;
                    font-size: .22rem;

                    img {
                        height: 0.24rem;
                        width: 0.133333rem;
                        margin-left: .07rem;
                        border: none;
                        vertical-align: middle;
                    }
                }
            }

            .box-contents {
                padding: .1rem;
                display: flex;
                -webkit-box-pack: start;
                justify-content: start;
                flex-wrap: wrap;

                .contents {
                    display: flex;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                    flex-direction: column;
                    -webkit-box-align: center;
                    align-items: center;
                    width: 1.333333rem;
                    margin: .1rem 0.24rem;

                    .img {
                        position: relative;
                        width: 0.666667rem;
                        height: 0.666667rem;
                        margin: .06rem;

                        img {
                            width: 100%;
                        }
                    }

                    div {}
                }
            }
        }
    }

    .btn {
        display: block;
        width: 9.36rem;
        height: 1.066667rem;
        line-height: 1.066667rem;
        color: #fff;
        background-color: #ff5777;
        font-size: .3rem;
        margin: 0 auto;
        border-radius: .04rem;
        text-align: center;
        margin-bottom: .18rem;
        border: 0;
    }
}